<template>
  <!-- Vue3组件中的模板结构没有根标签 -->
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">msg</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.job.j1.salary}}</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增加年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
  // import {h} from 'vue'
  import { reactive, ref,watch,watchEffect } from 'vue'
  export default {
    name: 'Demo',
    setup() {
      //数据
      let sum = ref(0)
      let msg = ref('你好啊')
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })
      //监视
      // watch的套路是：既要指明监视的属性，也要指明监视的回调。
      // watchEffect的套路是:不用指明监视那个属性，监视的回调中用到那个属性就监视那个属性
      /* watchEffect有点像computed：
        但computed注重的计算出来的值（回调函数的返回值），所以必须写返回值。
        而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值 */
      watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue);
      },{ immediate:true })
      watchEffect(()=>{
        const x1 = sum.value
        const x2 = person.job.j1.salary
        console.log('watchEffect所指向的回调执行了',x1,x2);
      })
      return {
        sum,
        msg,
        person
      }
    },
    //vue2写法
    /* watch:{
      sum(newValue,oldValue){
        console.log('sum变化了',newValue,oldValue);
      },
      sum:{
        immediate:true,
        depp:true,
        handler(newValue,oldValue){
          console.log('sum变化了',newValue,oldValue);
        }
      }
    } */
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
